扩展运算符

1. 概述

扩展运算符（Spread Operator）是 JavaScript 中一个非常有用的特性，它允许我们将数组或对象的内容展开到另一个数组或对象中。扩展运算符使用三个点（...）来表示，可以用于数组、对象、函数参数等多个场景。

2. 基本语法

扩展运算符的基本语法如下：

const array = [1, 2, 3];
const newArray = [...array, 4, 5];
console.log(newArray); // 输出: [1, 2, 3, 4, 5]

在上面的例子中，...array 将 array 中的元素展开，然后与 4 和 5 一起组成一个新的数组 newArray。

3. 数组中的扩展运算符

3.1 合并数组

扩展运算符可以用于合并两个或多个数组：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // 输出: [1, 2, 3, 4, 5, 6]

3.2 复制数组

扩展运算符还可以用于复制数组：

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // 输出: [1, 2, 3]

3.3 传递数组作为函数参数

扩展运算符可以将数组展开为函数的参数：

function sum(a, b, c) {
    return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers);
console.log(result); // 输出: 6

4. 对象中的扩展运算符

4.1 合并对象

扩展运算符可以用于合并两个或多个对象：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // 输出: { a: 1, b: 3, c: 4 }

注意：如果两个对象中有相同的键，后面的对象会覆盖前面的对象。

4.2 复制对象

扩展运算符还可以用于复制对象：

const originalObj = { a: 1, b: 2 };
const copiedObj = { ...originalObj };
console.log(copiedObj); // 输出: { a: 1, b: 2 }

5. 实践练习

5.1 练习1：合并多个数组

编写一个函数 mergeArrays，它接受任意数量的数组作为参数，并返回一个合并后的数组。

function mergeArrays(...arrays) {
    return [].concat(...arrays);
}

const result = mergeArrays([1, 2], [3, 4], [5, 6]);
console.log(result); // 输出: [1, 2, 3, 4, 5, 6]

5.2 练习2：合并多个对象

编写一个函数 mergeObjects，它接受任意数量的对象作为参数，并返回一个合并后的对象。

function mergeObjects(...objects) {
    return objects.reduce((acc, obj) => ({ ...acc, ...obj }), {});
}

const result = mergeObjects({ a: 1 }, { b: 2 }, { c: 3 });
console.log(result); // 输出: { a: 1, b: 2, c: 3 }

6. 总结

扩展运算符是 JavaScript 中一个非常强大的工具，它简化了数组和对象的操作。通过扩展运算符，我们可以轻松地合并数组和对象，复制数组和对象，以及将数组展开为函数的参数。掌握扩展运算符的使用，将大大提高你的 JavaScript 编程效率。

7. 下一步

接下来，你可以继续学习 JavaScript 的模块系统（import/export），它允许你将代码组织成模块，并通过扩展运算符来导入和导出模块中的内容。